<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的考勤</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type='text/javascript' src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type='text/javascript' src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type='text/javascript' src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script src="../js/libs/juicer-min.js"></script>
    <script src="../js/libs/jquery.md5.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<div class="content native-scroll bg-white p-t22">
    <!--我的考勤-->
    <div class="my-checking-in-detail">
        <!--头部-->
        <div class="head-no-toolbar bg-self-green">
            <span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>
            <span class="c-white t-center">我的考勤</span>
            <span></span>
        </div>
        <!--内容-->
        <div class="check-head">
            <div class="item-left">
                <img src="../images/appportrait2.png" alt=""/>
                <p>神犬小七</p>
            </div>
            <div class="item-right open-choose-pup">
                Andriod黑马培训班
            </div>
        </div>
        <div class="punch-card-con">
            <p class="text-info">每天都是修行，告诉自己没有什么不可以！</p>
            <div class="punch-card">
                <p>出勤时间</p>
                <p class="insert-time"></p>
            </div>
        </div>
    </div>
    <!--模态弹出选择框 放在最外面-->
    <div class="choose-pup">
        <div class="choose-con">
            <div class="choose-item first-item">Web开发实战班</div>
            <div class="choose-item">Angular开发实战班</div>
            <div class="choose-item">移动开发实战班</div>
        </div>
        <div class="choose-btn">确定</div>
    </div>
</div>
<script>
    !(function(){
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

//        插入时间
        function showTime(){
            var date=new Date();
            var s=date.getSeconds();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var minute=date.getMinutes();
            if(s<10){
                s="0"+s;
            }
            if(minute<10){
                minute="0"+minute;
            }
            if(hour<10){
                hour="0"+hour;
            }
            var dateStr=hour+":"+minute+":"+s;
            $('.insert-time').html(dateStr);
        }
        window.setInterval(showTime,1000);
        showTime();

//弹出框选择
        $(document).on('click','.open-choose-pup',function(){
            $('.choose-pup').fadeIn(200).css('display','flex');
            $('.content').css('top','0');
            $('.my-checking-in-detail').css('padding-top',2.2+'rem');
        })
        $(document).on('click','.choose-pup .choose-con .choose-item',function(){
            //在当前元素上储存数据{'clicked',1} 而其它同辈元素上储存{'clicked',0}
            //为了 点击确定时判断用户是否点击了 选择的按钮 如果没有返回1 模态框不消失，反之
            $(this).data('clicked',1)
                    .css('background','#ffee97')
                    .siblings().css('background','#fff')
                    .data('clicked',0);
        });
        $(document).on('click','.choose-btn',function() {
            var $this_btn = $(this);
            $('.choose-pup .choose-con .choose-item').each(function () {
                if ($(this).data('clicked') == 1) {
                    $this_btn.parent().fadeOut(200);
                    $('.my-checking-in-detail').css('padding-top', 0);
                    $('.content').css('top', 2.2 + 'rem');
                    $('.open-choose-pup').text($(this).text());
                }
            });
        });
    })();

    $('.punch-card').click(function(){
        if($(this).find('p:first-child').text()!='签到成功'){
            $(this).find('p:first-child').text('签到成功');
        }else{
            toast("已经签到了。");
        }
    });
</script>
</body>
</html>
